<template>
    <div>
        <hd-tab :tabs="tabs"></hd-tab>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span class="text-lg">角色选择</span>
                <hd-alert :alert="{type:'success'}">您正在编辑【{{ admin.name }}】的角色</hd-alert>
            </div>
            <el-form ref="form" :model="form" label-width="80px">
                <div v-for="(role, index) in roles" :key="index" class="inline mx-3">
                 <span>
                        <input type="checkbox" :id="role.name" :value="role.name"
                               v-model="form.roles">
                         <label :for="role.name">{{ role.title }}</label>
                  </span>
                </div>
            </el-form>
            <el-button class="mt-3" type="success" @click="onSubmit">保存提交</el-button>
        </el-card>

    </div>
</template>

<script>
import tabs from './tabs'

export default {
    route: {path: 'admin/:aid/role', meta: {title: '管理员角色'}},
    data() {
        return {
            tabs,
            aid: this.$route.params.aid,
            admin: {},
            roles: [],
            form: {roles: []}
        }
    },
    async created() {
        this.admin = await this.axios.get(`admin/admin/${this.aid}`)
        //当前用户的角色
        this.form.roles = await this.axios.get(`admin/admin/${this.aid}/roles`)
        //所有角色
        this.roles = await this.axios.get('admin/role')
    },

    methods: {
        async onSubmit() {
            await this.axios.put(`admin/admin/${this.aid}/role`, this.form)
            this.$router.push({name: 'admin.admin.index'})
        }
    }
}
</script>

<style scoped>

</style>
